<template>
  <div id="menu">
    <canvas id="canvas" class="canvas"></canvas>
    <transition name="fade-out">
      <div v-show="!login">
        <div class="nav">
          <router-link to="/customer-login">
            <a class="gv" href="javascript:;" @click="customerLogin()">客户登录</a>
          </router-link>
          <router-link to="/admin-login">
            <a class="gv" href="javascript:;" @click="adminLogin()">管理员登录</a>
          </router-link>
        </div>
      </div>
    </transition>

    <transition name="fade-in">
      <router-view :customer="customer" :login="login" @back="back" :admin="admin"></router-view>
    </transition>
    <div class="city"></div>
    <div class="moon"></div>
  </div>
</template>

<script>
  let _this;
  export default {
    name: "login",
    data() {
      return {
        login: false,
        customer: false,
        admin: false
      }
    },
    created() {
      _this = this;
    },
    mounted() {
      let canvas = document.getElementById("canvas"),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,
        context = canvas.getContext("2d"),
        num = 200,
        data = [],
        rainCount = 20,
        rains = new Array(),
        oX = Math.random() * w,
        oY = Math.random() * h;

      /*流星雨开始*/
      let MeteorRain = function () {
        this.x = -1;
        this.y = -1;
        this.length = -1;//长度
        this.angle = 30; //倾斜角度
        this.width = -1;//宽度
        this.height = -1;//高度
        this.speed = 1;//速度
        this.offset_x = -1;//横轴移动偏移量
        this.offset_y = -1;//纵轴移动偏移量
        this.alpha = 1; //透明度
        this.color1 = "";//流星的色彩
        this.color2 = "";  //流星的色彩
        /****************初始化函数********************/
        this.init = function () //初始化
        {
          this.getPos();
          this.alpha = 1;//透明度
          this.getRandomColor();
          //最小长度，最大长度
          let x = Math.random() * 80 + 150;
          this.length = Math.ceil(x);
//                  x = Math.random()*10+30;
          this.angle = 30; //流星倾斜角
          x = Math.random() + 0.5;
          this.speed = Math.ceil(x); //流星的速度
          let cos = Math.cos(this.angle * 3.14 / 180);
          let sin = Math.sin(this.angle * 3.14 / 180);
          this.width = this.length * cos;  //流星所占宽度
          this.height = this.length * sin;//流星所占高度
          this.offset_x = this.speed * cos;
          this.offset_y = this.speed * sin;
        };

        /**************获取随机颜色函数*****************/
        this.getRandomColor = function () {
          let a = Math.ceil(255 - 240 * Math.random());
          //中段颜色
          this.color1 = "rgba(" + a + "," + a + "," + a + ",1)";
          //结束颜色
          this.color2 = "black";
        };


        /***************重新计算流星坐标的函数******************/
        this.countPos = function ()//
        {
          //往左下移动,x减少，y增加
          this.x = this.x - this.offset_x;
          this.y = this.y + this.offset_y;
        };

        /*****************获取随机坐标的函数*****************/
        this.getPos = function () //
        {
          //横坐标200--1200
          this.x = Math.random() * window.innerWidth; //窗口高度
          //纵坐标小于600
          this.y = Math.random() * window.innerHeight;  //窗口宽度
        };
        /****绘制流星***************************/
        this.draw = function () //绘制一个流星的函数
        {
          context.save();
          context.beginPath();
          context.lineWidth = 1; //宽度
          context.globalAlpha = this.alpha; //设置透明度
          //创建横向渐变颜色,起点坐标至终点坐标
          let line = context.createLinearGradient(this.x, this.y,
            this.x + this.width,
            this.y - this.height);

          //分段设置颜色
          line.addColorStop(0, "white");
          line.addColorStop(0.3, this.color1);
          line.addColorStop(0.6, this.color2);
          context.strokeStyle = line;
          //起点
          context.moveTo(this.x, this.y);
          //终点
          context.lineTo(this.x + this.width, this.y - this.height);
          context.closePath();
          context.stroke();
          context.restore();
        };
        this.move = function () {
          //清空流星像素
          let x = this.x + this.width - this.offset_x;
          let y = this.y - this.height;
          context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5);
//                  context.strokeStyle="red";
//                  context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1);
          //重新计算位置，往左下移动
          this.countPos();
          //透明度增加
          this.alpha -= 0.002;
          //重绘
          this.draw();
        }
      };

      //绘制流星
      function playRains() {
        for (let n = 0; n < rainCount; n++) {
          let rain = rains[n];
          rain.move();//移动
          if (rain.y > window.innerHeight) {//超出界限后重来
            context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);
            rains[n] = new MeteorRain();
            rains[n].init();
          }
        }
      }

      window.onresize = oInit();
      oInit();
      /*月亮*/

      /*初始化星星*/
      function oInit() {
        data = [];
        for (let i = 0; i < num; i++) {
          data[i] = {
            aX: Math.random() * 0.6 - 0.3,
            aY: Math.random() * 0.6 - 0.3,
            R: Math.random() * 10 + 3,
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            r: Math.random() * 360,
            opacity: 1,
            a: Math.random() * 0.07 + 0.93
          };
        }
      }

      obj();

      function obj() {
        //画流星/*debugger;*/
        for (let j = 0; j < rainCount; j++) {
          let rain = new MeteorRain();
          rain.init();
          rain.draw();
          rains.push(rain);
        }
        playRains();//绘制流星
      }

      !function oDraw() {
        context.clearRect(0, 0, w, h);
        for (let i = 0; i < num; i++) {
          data[i].x += data[i].aX;
          data[i].y += data[i].aY;
          if (data[i].x >= w || data[i].x <= 0) data[i].aX = -data[i].aX;
          if (data[i].y >= h || data[i].y <= 0) data[i].aY = -data[i].aY;
          data[i].opacity *= data[i].a;
          if (data[i].opacity < 0.2) {
            data[i].opacity = 1;
          }
          drawStar(context, data[i].R / 2, data[i].R, data[i].x, data[i].y, data[i].r, data[i].opacity);
        }
        playRains();
        draw_moon(context);
        draw_moon2(context);
        draw_moon3(context);
        window.requestAnimationFrame = (function () {
          return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function (callback) {
              window.setTimeout(callback, 1000 / 60);
            };
        })();
        window.requestAnimationFrame(oDraw);
        // moon();
      }();

      function drawStar(context, r, R, x, y, rota, a) {
        context.beginPath();
        //使用循环的方式确定点的位置
        for (let i = 0; i < 5; i++) {
          //外层大圆上的五个点的位置
          context.lineTo(Math.cos((18 + i * 72 - rota) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - rota) / 180 * Math.PI) * R + y);
          //内层小圆上点的位置
          context.lineTo(Math.cos((54 + i * 72 - rota) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 - rota) / 180 * Math.PI) * r + y);
        }
        context.closePath();
        //设置一些状态
        context.fillStyle = "rgba(255,255,255," + a + ")";
        context.strokeStyle = "#000";
        context.lineWidth = 1;
        context.lineJoin = "";
        context.fill();
        context.stroke();
      }

      /*流星雨结束*/
      function draw_moon(context) { //画月亮 hovertree.com
        context.beginPath();
        context.arc(200, 200, 100, 0.6 * Math.PI, 1.3 * Math.PI);
        context.bezierCurveTo(140, 119, 93, 224, 169, 295);
        context.fillStyle = "#ddd";
        context.fill();
        context.stroke();
      }

      function draw_moon2(context) { //月亮的眼睛。。。
        context.beginPath();
        context.moveTo(110, 180);
        context.lineTo(115, 180);
        context.stroke();
      }

      function draw_moon3(context) { //zzz...
        context.beginPath();
        context.moveTo(40, 80);
        context.lineTo(60, 80);
        context.lineTo(40, 100);
        context.lineTo(60, 100);
        context.strokeStyle = "yellow";
        context.stroke();

        context.beginPath();
        context.moveTo(63, 108);
        context.lineTo(80, 108);
        context.lineTo(63, 123);
        context.lineTo(80, 123);
        context.strokeStyle = "yellow";
        context.stroke();

        context.beginPath();
        context.moveTo(86, 130);
        context.lineTo(100, 130);
        context.lineTo(86, 142);
        context.lineTo(100, 142);
        context.strokeStyle = "yellow";
        context.stroke();
      }
    },
    methods: {
      customerLogin() {
        this.login = true;
        this.customer = true;

      },
      adminLogin() {
        this.login = true;
        this.admin = true;
      },
      back() {
        this.login = false;
        this.customer = false;
        this.admin = false;
      }
    }
  }
</script>

<style scoped>
  #menu {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .canvas {
    position: fixed;
    z-index: -1;
    background: #000;
  }

  .nav {
    z-index: 10000;
  }

  .gv {
    text-decoration: none;
    background: url('../assets/nav_gv.png') repeat 0px 0px;
    width: 130px;
    height: 43px;
    display: block;
    text-align: center;
    line-height: 43px;
    cursor: pointer;
    float: left;
    margin: 10px 2px 10px 2px;
    font: 18px/43px 'microsoft yahei';
    color: #066197;
  }

  a.gv:hover {
    background: url('../assets/nav_gv.png') repeat 0px -43px;
    color: #1d7eb8;
    -webkit-box-shadow: 0 0 6px #1d7eb8;
    transition-duration: 0.5s;
  }

</style>
